import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { Layout, Menu, Button } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { routes, flattenRoutes, RouteItem } from './routes';
import './App.css';

const { Header, Sider, Content } = Layout;

// Define a type for menu items
interface MenuItemType {
  key: string;
  icon?: React.ReactNode;
  label: string;
  children?: MenuItemType[];
}

const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  const renderMenuItems = (items: RouteItem[]): MenuItemType[] => {
    return items.map(item => {
      if (item.children) {
        return {
          key: item.key,
          icon: item.icon,
          label: item.label,
          children: renderMenuItems(item.children)
        };
      }
      return {
        key: item.path,
        icon: item.icon,
        label: item.label
      };
    });
  };

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  // 找出当前路径对应的菜单项的 keys
  const findOpenKeys = () => {
    for (const route of routes) {
      if (route.children) {
        for (const child of route.children) {
          if (location.pathname === child.path) {
            return [route.key];
          }
        }
      }
    }
    return [];
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed} theme="light">
        <div className="logo" style={{ height: 32, margin: 16, background: 'rgba(0, 0, 0, 0.2)' }} />
        <Menu
          mode="inline"
          defaultSelectedKeys={[location.pathname]}
          defaultOpenKeys={findOpenKeys()}
          style={{ height: '100%', borderRight: 0 }}
          items={renderMenuItems(routes)}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: '#fff' }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={toggleCollapsed}
            style={{ fontSize: '16px', width: 64, height: 64 }}
          />
        </Header>
        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
          <Routes>
            {flattenRoutes(routes).map(route => (
              <Route key={route.path} path={route.path} element={route.element} />
            ))}
          </Routes>
        </Content>
      </Layout>
    </Layout>
  );
};

function App() {
  return (
    <HelmetProvider>
      <Router>
        <MainLayout />
        <Helmet>
          <title>工具平台</title>
          <meta name="description" content="展示各种实用工具的平台" />
        </Helmet>
      </Router>
    </HelmetProvider>
  );
}

export default App;
